<template>
  <div id="index">
    <!--头部tab切换-->
    <ul class="taber clear">
      <li v-for='(item,index) in currentText' :class="{on:index==num}" @click="currentTab(index,item.id)" :key="index">
        <label>{{item.name}}</label>
      </li>
    </ul>
    <!--主体-->
    <div class="center">
      <div class="content">
        <div class="content_list clear" v-for="(item,index) in currentContent" @click="orderDetails(item.type)" :key="index">
          <div class="fl content_left">
            <p :class="[{color_green:item.type==1},{color_red:item.type==2},
            {color_grey:item.type==3},{color_grey:item.type==4},{color_grey:item.type==5}]">
              <span v-if="item.type==1">可使用</span>
              <span v-if="item.type==2">代付款</span>
              <span v-if="item.type==3">已取消</span>
              <span v-if="item.type==4">已使用</span>
              <span v-if="item.type==5">已失效</span>
            </p>
            <img :src="item.businessImg">
          </div>
          <div class="fl content_right">
            <p class="content_title">{{item.name}}</p>
            <p class="content_time">{{item.startTime}}至{{item.endTime}}<span v-if="item.type==1">明天</span></p>
            <p class="content_money">{{item.num}}份|总价：¥{{item.money}}<span v-if="item.type==2">代付款</span></p>
          </div>
        </div>
      </div>
    </div>
    <!--<p>底部</p>-->
  </div>
</template>

<script>
  // import card from '@/components/card'
  export default {
    name: "index",
    data () {
      return {
        num: 0,
        currentText: [
          {
              name: "全部订单",
              id: 0
          },{
              name: "代付款",
              id: 2
          },{
              name: "可使用",
              id: 1
          }
        ],
        currentContent: ""
      }
    },
    filters: {

    },
    components: {

    },
    methods: {
      loading () {
        console.log("上拉加载更多");
      },
      refresh () {
        console.log("下拉刷新");
      },
      currentTab: function (index, id) {
        this.num = index;
        if(id ==0) {
          this.currentContent = this.$store.state.order;
        }else  if(id ==2) {
          for (var k = 0, length = this.$store.state.order.length; k < length; k++) {
            if(this.$store.state.order[k].type == id) {
              this.currentContent = [this.$store.state.order[k]];
            }
          }
        }else  if(id ==1) {
          for (var j = 0, length = this.$store.state.order.length; j < length; j++) {
            if(this.$store.state.order[j].type == id) {
              this.currentContent= null;
              this.currentContent = [ this.$store.state.order[j]];
            }
          }
        }

      },
      orderDetails: function (type) {
        /*页面跳转传值*/
        wx.navigateTo({
          url: '/pages/order/orderDetails/main?type='+type,
          success: function(){},       //成功后的回调；
          fail: function(){},          //失败后的回调
          complete: function(){}      //结束后的回调(成功，失败都会执行)
        });
      }
    },
    computed: {
      // count() {
      //   return this.$store.state.name
      // },
    },
    onLoad: function (option) {
      this.currentContent = this.$store.state.order;
    },
    created() {
      // console.log(this.$store.state.name);
      // this.getUserInfo();
    },
    // onPullDownRefresh() {
    //   //下拉刷新
    //   this.refresh();
    // },
    onReachBottom() {
      //上拉加载
        this.loading();
    }
  }
</script>

<style scoped lang=scss>
  @import "../../../static/css/index.css";
  $color-f5: #f5f5f5;
  $color-fff: #ffffff;
  $color-green: #3bdabb;
  $color-999:#999999;
  $color-crimson: #da3b6f;
  $color-red: #ff1b1b;
  $color-grey: #d0d0d0;
  #index {
    background: $color-f5;
    margin-top:-19rpx;
  }
  .center {
    width: 100%;
  }
  .taber {
    background: $color-fff;
    position: fixed;
    border-top: 1rpx solid $color-f5;
    width: 100%;
    z-index:999;
    li {
      float: left;
      width: 33.33%;
      height: 110rpx;
      line-height: 110rpx;
      text-align: center;
      font-size: 30rpx;
      color: $color-999;
      > label {
        height: 104rpx;
        line-height: 104rpx;
        display: inline-block;
      }
      &.on {
        > label {
          color: $color-green;
          border-bottom: 6rpx solid $color-green;
        }
      }
    }
  }
  .center {
    padding: 130rpx 5rpx 0rpx 5rpx;
    .content {
      background: $color-fff;
      padding: 40rpx 20rpx;
      .content_list {
        height: 260rpx;
        width: 100%;
        border: 1rpx solid $color-fff;
        border-radius: 20rpx;
        margin-bottom: 40rpx;
        .content_left {
          width: 260rpx;
          height: 260rpx;
          position: relative;
          border-top-left-radius:20rpx;
          border-bottom-left-radius:20rpx;
          overflow: hidden;
          box-shadow: 0rpx 12rpx 25rpx 0rpx $color-grey;
          >img {
            width: 100%;
            height: 100%;
          }
          >p {
            width: 260rpx;
            height: 70rpx;
            line-height: 70rpx;
            position: absolute;
            top: 0;
            left: 0;
            text-align: center;
            font-size: 30rpx;
            color: $color-fff;
            &.color_green {
              background: $color-green;
            }
            &.color_red {
              background: $color-crimson;
            }
            &.color_grey {
              background: $color-grey;
            }
          }
        }
        .content_right {
          width:410rpx;
          height:260rpx;
          padding-left:20rpx;
          padding-right:15rpx;
          border-top-right-radius: 20rpx;
          border-bottom-right-radius: 20rpx;
          box-shadow: 2rpx 12rpx 25rpx 0rpx $color-grey;
          .content_title {
            color: #3e3e3e;
            font-size: 30rpx;
            font-weight: bolder;
            margin-top: 50rpx;
            overflow: hidden;/*超出部分隐藏*/
            white-space: nowrap;/*不换行*/
            text-overflow:ellipsis;/*超出部分文字以...显示*/
          }
          .content_time {
            color: $color-999;
            font-size: 28rpx;
            margin-top: 40rpx;
            span {
              color: $color-red;
              float: right;
            }
          }
          .content_money {
            color: $color-999;
            font-size: 28rpx;
            margin-top: 10rpx;
            span {
              color: $color-red;
              float: right;
            }
          }
        }
      }
    }
  }
  /*taber*/


</style>
